<ul ngbNav
    #nav="ngbNav"
    class="nav-tabs">
  <li ngbNavItem>
    <a ngbNavLink
       i18n>Hosts List</a>
    <ng-template ngbNavContent>
      <cd-table [data]="hosts"
                [columns]="columns"
                columnMode="flex"
                (fetchData)="getHosts($event)"
                selectionType="single"
                [hasDetails]="true"
                (setExpandedRow)="setExpandedRow($event)"
                (updateSelection)="updateSelection($event)">
        <div class="table-actions btn-toolbar">
          <cd-table-actions [permission]="permissions.hosts"
                            [selection]="selection"
                            class="btn-group"
                            id="host-actions"
                            [tableActions]="tableActions">
          </cd-table-actions>
        </div>
        <cd-host-details cdTableDetail
                         [permissions]="permissions"
                         [selection]="expandedRow">
        </cd-host-details>
      </cd-table>
    </ng-template>
  </li>
  <li ngbNavItem
      *ngIf="permissions.grafana.read">
    <a ngbNavLink
       i18n>Overall Performance</a>
    <ng-template ngbNavContent>
      <cd-grafana [grafanaPath]="'host-overview?'"
                  uid="y0KGL0iZz"
                  grafanaStyle="two">
      </cd-grafana>
    </ng-template>
  </li>
</ul>

<div [ngbNavOutlet]="nav"></div>

<ng-template #servicesTpl
             let-value="value">
  <span *ngFor="let service of value; last as isLast">
    <a class="service-link"
       [routerLink]="[service.cdLink]"
       [queryParams]="cdParams"
       *ngIf="service.canRead">{{ service.type }}.{{ service.id }}</a>
    <span *ngIf="!service.canRead">
      {{ service.type }}.{{ service.id }}
    </span>
    <ng-container *ngIf="!isLast">, </ng-container>
  </span>
</ng-template>
